.map_chart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  height: 600px;
  width: 100%;
}
.mainCenter {
  height: 100%;
}
.mainCenter .map {
  position: relative;
  height: 100%;
}
.mainCenter .map .map1,
.mainCenter .map .map2,
.mainCenter .map .map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 550px;
  height: 550px;
  background: url(@/assets/images/map.png) no-repeat;
  background-size: 100% 100%;
  opacity: 0.3;
}
.mainCenter .map .map2 {
  width: 650px;
  height: 650px;
  background-image: url(@/assets/images/lbx.png);
  opacity: 0.6;
  animation: rotate 15s linear infinite;
  z-index: 2;
}
.mainCenter .map .map3 {
  width: 600px;
  height: 600px;
  position: absolute;
  background-image: url(@/assets/images/jt.png);
  animation: rotate1 10s linear infinite;
}
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
